
<template>
  <view class="m-viewBox">
    <image :src="current.img" class="m-videoPoster" />
    <image src="../../static/cover.png" class="m-cover" />
    <p class="m-videoTitle">{{current.title}}</p>
    <div class="m-status u-now" v-if="current.status == '直播'">
        直播中.....
    </div>
     <div class="m-status u-after" v-if="current.status == '预约'">
        预约中
    </div>
     <div class="m-status u-before" v-if="current.status == '回看'">
        回看中
    </div>
      <image src="../../static/play.png" class="m-play" v-if="current.status == '直播'"/>
  </view>
</template>

<script lang="ts">
import Vue from "vue";
export default Vue.extend({
  name: "videoList",
  props: ["current"],
  data() {
    return {};
  },
  onLoad() {},
  methods: {}
});
</script>

<style lang="scss">
.m-viewBox {
  overflow: hidden;
  height: 400upx;
  position: relative;
  border-radius: 25upx;
  margin-bottom: 30upx;
}
.m-cover {
  width: 686upx;
  height: 400upx;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 900;
}
.m-videoPoster {
  display: block;
  width: 686upx;
  height: 400upx;
}
.m-videoTitle {
  font-size: 30upx;
  color: #fff;
  padding: 0 40upx 40upx;
  position: absolute;
  bottom: 0;
  left: 0;
  text-align: justify;
  box-sizing: border-box;
  z-index: 910;
}
.m-status {
  width: 128upx;
  height: 40upx;
  color: #FFF;
  font-size: 22upx;
  text-align: center;
  line-height: 40upx;
  position: absolute;
  right: 20upx;
  top: 20upx;
  border-radius: 25upx;
  &.u-after {
    background: #58bd63;
  }
  &.u-now {
    background: #edac36;
  }
  &.u-before {
    background: #5878bd;
  }
}
.m-play {
  width: 104upx;
  height: 104upx;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  z-index: 910;
}
</style>
